<template>
  <div class="table_caozuo">
    <template v-for="(item,index) in btn">
      <el-button
        :key="index"
        @click="handler(index)"
        v-if="item.isShow"
        type="primary"
        style="margin:0 0 20px 0"
      >{{item.title}}</el-button>
    </template>
    <avue-crud
      ref="crud"
      style="width:100%"
      :data="loadData"
      :option="tableOption"
      :table-loading="loading"
    >
    <template slot-scope="scope" slot="indexLabel">
        <span>{{scope.row.$index+(page.current - 1) * page.size + 1}}</span>
      </template>
      <template slot="dh" slot-scope="scope">
        <el-image
          style="width: 50px; height: 50px"
          :src="scope.row.dh"
          :preview-src-list="[scope.row.dh]"
        ></el-image>
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button @click="edit(scope.row)" type="text" icon="el-icon-edit">编辑</el-button>
        <el-button
          type="text"
          @click="switchs(scope.row)"
          :icon="scope.row.status == '00'?'el-icon-circle-close':'el-icon-circle-check'"
        >{{scope.row.status == '00'?'停用':'启用'}}</el-button>
        <!--   <el-button @click="supplierList(scope.row.id)" type="text" icon="el-icon-edit">供应商品列表</el-button> -->
      </template>
    </avue-crud>
    <template>
      <div style="width:100%;position:relative;height:50px">
        <el-pagination
          :page-sizes="[10, 20,30,40, 50, 100]"
          :pager-count="7"
          :current-page="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="position:absolute;right:1%;margin-top:2%;"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </template>
    <el-dialog
      :title="dialogTitle == 1?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="40%"
      :destroy-on-close="true"
    >
      <addList ref="addList" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlClose">取 消</el-button>
        <el-button type="primary" @click="handlSure" :loading="loadingSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script src='./list_table.js'></script>

<style lang="scss">
.table_caozuo {
  margin: 10px 0px;
}
</style>